<template>
	<div class="formData">
		<el-form :model="formData" ref="ruleForm" :rules="rules" :inline="true" label-width="110">
			<el-form-item label="码头名称" prop="dockName">
				<el-input v-model="formData.dockName" placeholder="请输入码头名称" />
			</el-form-item>
			<el-form-item label="码头代码" prop="dockCode">
				<el-input v-model="formData.dockCode" placeholder="请输入码头代码" />
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup name="dict">
	
import {
		ref,
		onMounted,
		reactive,
		nextTick,
		defineExpose
	} from "vue";
	const ruleForm = ref()
	const formData = ref({
		id: null,
		dockName: '',
		dockCode: '',
		portAreaCode:'04',
		portAreaName:'滨州港区'
	})
	const rules = reactive({
		dockName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		dockCode: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}]
	})

	const validate = async () => {
		let flag = false
		await ruleForm.value.validate((valid) => {
			if (valid) {
				flag = true
			} else {
				flag = false
			}
		})
		return flag
	}
	const resetForm = () => {
		formData.id = null
		ruleForm.value.resetFields()
	}
	defineExpose({
		validate,
		ruleForm,
		resetForm,
		formData,
	})
</script>
<style scoped>
	/* // @import '@/assets/styles/formData.scss'; */
	.el-form-item{
		display: flex;
	}
</style>